<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
          <el-table-column prop="url" label="图片" align="center" sortable></el-table-column>
		  <el-table-column prop="seq" label="排序" align="center" sortable></el-table-column>
          <el-table-column prop="msg" label="说明" align="center" sortable></el-table-column>
          <el-table-column v-if='hasPerm("product:productMedia:list")' label="更多操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button v-if='hasPerm("product:productMedia:edit")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button v-if='hasPerm("product:productMedia:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
		<br/>
		<el-button v-if='hasPerm("product:productMedia:add")' type="primary" plain icon="el-icon-plus" @click="openAdd">新增</el-button>
      </el-card>
      <!--新增 编辑对话框-->
      <el-dialog :title="dialog.dialogTitle" :visible.sync="dialog.visible" width="35%">
        <el-form :rules="rules" ref="productMediaForm" :model="productMediaForm" size="small" label-width="80px">
          <el-form-item prop="url" label="路径">
            <el-input v-model="productMediaForm.url" placeholder="请输入路径" auto-complete="off"></el-input>
          </el-form-item>
		  <el-form-item prop="seq" label="排序">
		    <el-input v-model="productMediaForm.seq" placeholder="请输入数值" auto-complete="off"></el-input>
		  </el-form-item>
          <el-form-item prop="msg" label="说明">
            <el-input v-model="productMediaForm.msg" placeholder="请输入说明" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
  import productMedia from "@/api/product/productMedia";
  export default {//vue3
    data() {
      return {
        // 表格数据
        tableData: [],
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 30,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {productId: null},
        // 弹出层
        dialog: {flag: 0, dialogTitle: "", visible: false},
        // 表单参数
        productMediaForm: {productMediaId: null,productId: null,seq: null,url: null,msg: null },
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          productMediaId: [{required: true,trigger: "change",message: "请输入产品图片"}],
          productId: [{required: true,trigger: "change",message: "请输入产品"}],
          url: [{required: true,trigger: "change",message: "请输入路径"}],
          msg: [{required: true,trigger: "change",message: "请输入说明"}],
        },
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
    },
    created() {
      this.getDataList();
    },
    watch: {
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.getDataList();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getDataList();
      },
      // 获取列表
      getDataList() {
        productMedia.list({productId: this.searchForm.productId}).then(res => {
          if(res.data.code === 2000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        });
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("productMediaForm");
        this.dialog.dialogTitle = "新增";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("productMediaForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.productMediaId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.productMediaForm.validate(valid => {
          if(valid){
            this.loading.status = true;
            productMedia.saveOrUpdate(this.productMediaForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            });
          }
        });
      },
      // 根据id获取信息
      getById(id) {
        productMedia.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.productMediaForm.productMediaId = res.data.data.productMediaId;
            this.productMediaForm.productId = res.data.data.productId;
            this.productMediaForm.url = res.data.data.url;
			this.productMediaForm.seq = res.data.data.seq;
            this.productMediaForm.msg = res.data.data.msg;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
            productMedia.remove(row.productMediaId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList();
            }else {
              this.$message.error(res.data.msg);
            }
          });
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {
    margin-bottom: 0;
  }
  .el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
  }
  .el-card/deep/.el-card__header {
    border-bottom: none !important;padding: 10px 10px !important;
  }
</style>